<template>
  <div class="regist">
    <!--遮罩层-->
    <div v-if="showModal" class="mask">  </div>
    <div class="top">
      <!-- <span class="left">柳州中心工企业应急周转资金申请平台</span>
      <div class="right">
        <span style="color:rgba(255, 155, 55, 1)">注册</span><span >登录</span> -->
      <div class="left">
        <span>柳州中心工企业应急周转资金申请平台</span>
      </div>
      <div class="right">
        <div class="regist" @click="$router.push('/register')">注册</div>
        <div class="login" @click="$router.push('/')">登录</div>
      </div>
    </div>
    <h2>法人注册</h2>
    <div class="slideVerify">
      <slide-verify  v-if="isShow" :l="42"
                     :r="10"
                     :w="310"
                     :h="155"
                     slider-text="向右滑动"
                     @success="onSuccess"
                     @fail="onFail"
                     @refresh="onRefresh"
      ></slide-verify>
    </div>
    <el-form :label-position="labelPosition" class="form" ref="ruleForm" :rules="rules" label-width="150px"
             :model="ruleForm">
      <el-form-item prop="enterpriseName" label="企业名称">
        <el-input placeholder="请输入您的企业名称" v-model="ruleForm.enterpriseName"></el-input>
      </el-form-item>
      <el-form-item prop="uniscid" label="统一社会信用代码">
        <el-input placeholder="请输入您的统一社会信用代码" v-model="ruleForm.uniscid"></el-input>
      </el-form-item>
      <el-form-item prop="phone" label="账号">
        <el-input placeholder="请输入您的手机号码" v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item prop="code" label="验证码">
        <el-col :span="20">
          <el-input placeholder="请输入验证码" v-model="ruleForm.code"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" style="margin-left:0.2rem" :disabled="disable" :class="{codeGeting:isGeting}" @click="verifyPhoneNumber">{{getCode}}</el-button>
        </el-col>
      </el-form-item>
      <el-form-item label="设置密码" prop="password">
        <el-input type="password" placeholder="请输入账号密码" v-model="ruleForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" placeholder="请再次确认您的密码" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>
      <!--            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>-->
      <el-button type="primary" @click="submitForm('ruleForm')" class="toRegist">下一步</el-button>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      var validateEnterpriseName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('企业名称不能为空'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validateUniscid = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('统一社会信用代码不能为空'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePhone = (rule, value, callback) => {
        //这个对象同时校验phone和email
        const reg = /(^1\d{10}$)|(^[0-9]\d{7}$)/; //手机号验证
        if (!value) {
          return callback(new Error("手机号不能为空"));
        } else {
          let re = new RegExp(reg);
          if (!re.test(value)) {
            callback(new Error("手机号格式不正确"));
          } else {
            callback();
          }
          // }
        }
      };
      var validateCode = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('验证码不能为空'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('密码不能为空'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        labelPosition: 'left',
        ruleForm: {
          //企业名称
          enterpriseName: '',
          //统一信用代码
          uniscid: '',
          //手机号
          phone: '',
          //验证码
          code: '',
          //密码
          password: '',
          //二次密码
          checkPass: '',
        },
        rules: {
          enterpriseName: [
            {validator: validateEnterpriseName,required:true, trigger: 'blur'}
          ],
          uniscid: [
            {validator: validateUniscid,required:true, trigger: 'blur'}
          ],
          phone: [
            {validator: validatePhone,required:true, trigger: 'blur'}
          ],
          code: [
            {validator: validateCode,required:true, trigger: 'blur'}
          ],
          password: [
            {validator: validatePassword,required:true, trigger: 'blur'}
          ],
          checkPass: [
            {validator: validatePass2,required:true, trigger: 'blur'}
          ],
        },
        getCode: '获取验证码',
        isGeting: false,
        count: 60,
        disable: false,
        text: '向右滑',
        // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
        accuracy: 1,
        isShow: false,//控制滑块是否显示
        showModal:false  //控制遮罩层默认false
      };
    },
    methods: {

      // 验证手机号，手机号为空不能发送验证码
      verifyPhoneNumber(){
        this.$refs['ruleForm'].validateField('phone', (err) =>{
          if(err){
            console.log('未通过')
            return;
          }else{
            console.log('已通过') // 验证手机号码通过
            this.showModal = true; //开启遮罩层
            this.isShow = !this.isShow; // 把验证码的块块展开
          }
        })
      },
      // 获取验证码
      getVerifyCode () {
        if (countDown) {
          return;
        }
        var countDown = setInterval(() => {
          if (this.count < 1) {
            this.isGeting = false
            this.disable = false
            this.getCode = '获取验证码'
            this.count = 60
            clearInterval(countDown)
          } else {
            this.isGeting = true
            this.disable = true
            this.getCode = this.count-- + 's后重发'
          }
        }, 1000)
      },
      securityCode() { //刷新验证码的方法
        console.log('点击了刷新验证码按钮')
        this.isShow = !this.isShow;
      },
      onSuccess(times){ //验证通过的方法
        console.log('验证通过，耗时 +'+times + '毫秒');
        this.getVerifyCode();   //获取验证码倒数60秒
        this.msg = times+'毫秒'
        this.showModal = false ;// 关闭遮罩层
        this.isShow  = false
      },
      onFail(){ //验证不通过的方法
        console.log('验证不通过');
        this.msg = ''
      },
      onRefresh(){  //点击了刷新按钮小图标
        console.log('点击了刷新小图标');
        this.msg = ''
      },
      onFulfilled() {
        console.log('刷新成功啦！');
      },
      onAgain() {
        console.log('检测到非人为操作的哦！');
        this.msg = 'try again';
        // 刷新
        this.$refs.slideblock.reset();
      },
      handleClick() {
        // 父组件直接可以调用刷新方法
        this.$refs.slideblock.reset();
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) =>{
          if (valid) {
            // alert('submit!');
            let res = this.request.loginOrRegister.register({
              //企业名称
              enterpriseName: this.ruleForm.enterpriseName,
              //统一信用代码
              uniscid: this.ruleForm.uniscid,
              //手机号
              phone: this.ruleForm.phone,
              //验证码
              code: this.ruleForm.code,
              //密码
              password: this.ruleForm.password,
            });
            console.log(res)
            console.log(this.ruleForm)
            this.$router.push("/home/real-name");
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // //获取验证码
      // async getCode(){
      //   console.log(this.ruleForm.phone)
      //   let res = await this.request.loginOrRegister.getCode(this.ruleForm.phone);
      //   console.log(res)
      // }
    }
  }
</script>

<style src="./register.css" scoped>

</style>
